<template>
  <div class="add-notice-root">
<!-- @closed 窗口关闭时结束时的回调   -->
    <el-dialog v-model="dialogStatus" title="添加邮件通知" width="800"
               @closed="closeDialog"
               style="text-align: center;font-weight:bold;"
    >
      <el-form :model="noticeContent">
        <el-form-item label="通知主题" :label-width="formLabelWidth">
          <el-input v-model="noticeContent.notice_topic" autocomplete="off" placeholder="请添加主题，明确标识为【警告】、【记过】等类型"/>
        </el-form-item>
        <el-form-item label="收件人" :label-width="formLabelWidth" @click="getAllClassesList">
          <el-cascader v-model="noticeContent.notice_members" :options="noticeMembersModelOptions" :props="noticeProps"
                       collapse-tags clearable style="width: 800px;" :max-collapse-tags="3"
                       @change="changeMembers"
          />
        </el-form-item>
        <el-form-item label="抄送人" :label-width="formLabelWidth" @click="getAllEmployeeAndPort">
          <el-cascader v-model="noticeContent.notice_copy_members" :options="noticeCopyMembersModelOptions" :props="noticeProps"
                       collapse-tags clearable style="width: 800px;" :max-collapse-tags="3"
                       @change="changeCopyMembers"
          />
        </el-form-item>
        <el-form-item label="邮件内容" :label-width="formLabelWidth">
          <el-input
              v-model="noticeContent.notice_content"
              style="width: 800px"
              :rows="10"
              type="textarea"
              placeholder="请输入邮件内容，明确说明时间、地点、人物"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="sendEmail">
            发送
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {reactive, ref, watch} from 'vue'
import {getAllClassesAndStudentsAPI} from "@/network/class/class";
import {getAllEmployeeAndPortAPI} from "@/network/employee/employee";
import {sendEmailAPI} from "@/network/notice/notice";
import {ElMessage} from "element-plus";
import eventBus from "@/plugins/event-bus";


const props = defineProps({
  dialogFormVisible: Boolean
})
const dialogStatus = ref(props.dialogFormVisible)
const emit = defineEmits(['closeFormVisible'])
const closeDialog = ()=>{
  emit('closeFormVisible', false)
}

// 监听父组件传递的 `dialogFormVisible` 变化
watch(() => props.dialogFormVisible, (newValue) => {
  // 如果需要在变化时执行一些逻辑，可以在这里添加，这里只把关闭的值传进去，相当于状态值转一圈来控制对话框的打开和关闭
  dialogStatus.value = newValue;
});

const formLabelWidth = '80px'

let noticeContent = ref({
  notice_topic: '',
  notice_content: '',
  notice_members: '',
  notice_copy_members: '',
});

// 下边的代码是处理点击收件人开始的逻辑

const noticeMembersModelOptions = reactive([])
// 点击抄送人的输入框，触发获取所有班级的请求
const getAllClassesList=()=>{
  getAllClassesAndStudentsAPI().then(res=>{
    console.log(res.data)
    if(res.data.code==0){
      res.data.data.map(item=>{
        noticeMembersModelOptions.push({
          value: item.id,
          label: item.class_name,
          children: item.students.map(student=>{
            return {
              value: student.email,
              label: student.name,
            }
          })
        })
      })
    }
  })
}

// 当选中选项时，绑定的函数，来处理数据结构,后端接受的发邮件的参数就是字符串
let sendEmailMembersParam = ref("");
const changeMembers=(options)=>{
  console.log(options)
  // 每次进来必须清空，不然越拼接越多
  sendEmailMembersParam.value="";
  for(let i=0;i<options.length;i++){
    sendEmailMembersParam.value += options[i][1] + ';'
  }
}

// 下面是添加抄送人的逻辑
let sendEmailCopyMembersParam = ref("");
let noticeCopyMembersModelOptions = ref([])
const getAllEmployeeAndPort=()=>{
  getAllEmployeeAndPortAPI().then(res=>{
    if(res.data.code==0){
      noticeCopyMembersModelOptions.value = res.data.data
    }
  })
}

const changeCopyMembers=(options)=>{
  // 每次进来必须清空，不然越拼接越多
  sendEmailCopyMembersParam.value="";
  for(let i=0;i<options.length;i++){
    sendEmailCopyMembersParam.value += options[i][1] + ';'
  }
}

// 收件人框里的选项，作为级联多选的配置
const noticeProps = { multiple: true}

const sendEmail=()=>{
  let sendEmailParams = {
    notice_topic: noticeContent.value.notice_topic,
    notice_content: noticeContent.value.notice_content,
    notice_members: sendEmailMembersParam.value,
    notice_copy_members: sendEmailCopyMembersParam.value,
  }
  sendEmailAPI(sendEmailParams).then((res)=>{
    if(res.data.code!=0){
      ElMessage.error(res.data.message)
      return
    }else{
      ElMessage.success(res.data.message)
    //  邮件发送成功，需要通知父组件重新渲染数据
      eventBus.emit("update-email-list-event",res.data.code)
    }
    closeDialog();
  })
}

</script>

<style scoped lang="less">
</style>